



import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  View,
  TouchableOpacity,
  Alert,
  Image,
  Text,
  ListView
} from 'react-native';
const Dimensions = require('Dimensions')
const { width } = Dimensions.get('window');
let left = (width - (width*0.1)*4) / 5;
import TopMenu from '../topMenu';

export default class MyStore extends Component<{}> {
  constructor(props) {
    super(props);
  }
  renderRow(foodItem){
    return (
      <Text>{foodItem.name}</Text>
    )
  }
  renderSectionHeader(sectionData, category) {
    return (
      <View style={{height:700}}>
        <Text>{category}</Text>
      </View>
    )
  }
  convertFoodArrayToMap() {
    var foodCategoryMap = {}; // Create the blank map
    var food = [
      { name: "Lettuce", category: "Vegetable" },
      { name: "Apple", category: "Fruit" },
      { name: "Orange", category: "Fruit" },
      { name: "Potato", category: "Vegetable" }
    ];
    food.forEach(function (foodItem) {
      if (!foodCategoryMap[foodItem.category]) {
        // Create an entry in the map for the category if it hasn't yet been created
        foodCategoryMap[foodItem.category] = [];
      }
      foodCategoryMap[foodItem.category].push(foodItem);
    });
    return foodCategoryMap;
  }
  getState(){
    var dataSource = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2
    });
    return {
      dataSource: dataSource.cloneWithRowsAndSections(this.convertFoodArrayToMap())
    };
  }
  render() {
    const {navigate} = this.props.navigation;
    console.log('init',this.getState())
    const dataSource=this.getState().dataSource;
    return(
      <View style={styles.container}>
        <TopMenu title="我的故事" navigate={navigate} navigation={this.props.navigation} router={"Me"}/>
        <ListView
      dataSource={dataSource}
      renderRow={this.renderRow}
      renderSectionHeader={this.renderSectionHeader}
      />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'white',
    backgroundColor: '#E8E8E8',
  },
});